<div >
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="member-form" id="member-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">协助成员</label>
                <div class="layui-input-block">
                    <div id="helpMember" class="xm-select-demo"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="confirmAdd">确认添加</button>
                </div>
            </div>
        </form>
    </div>
    <div style="padding: 20px 20px 20px 20px">
        <table class="layui-hide" id="projectMemberTableId" lay-filter="projectMemberTableFilter"></table>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'layer', 'miniAjax'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            miniAjax = layui.miniAjax,
            table = layui.table;

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        var projectId = sessionStorage.getItem("projectId");
        console.log("member projectId = " + projectId);

        var helpMemberSelect = xmSelect.render({
            el: '#helpMember',
            tips: '请选择协助成员',
            radio: true,
            clickClose: true,
            theme: {color: '#006ad4'},
            filterable: true,
            remoteSearch: true,
            prop: {
                name: 'tenantAccount',
                value: 'id',
            },
            remoteMethod: function (val, cb, show) {
                miniAjax.postJSON({
                    url: '/projectmember/search',
                    data: JSON.stringify(Object.assign({}, {'keyword': val}, {'projectId': projectId})),
                    success: function (res) {
                        if (res.code === 0) {
                            cb(res.data);
                        } else {
                            cb([]);
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    },
                    error: function (error) {
                        cb([]);
                        layer.msg(error, {time: 1000, icon: 2});
                    }
                });
            }
        });


        var memberTable = table.render({
            elem: '#projectMemberTableId',
            url: '/projectmember/list',
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            where: {'projectId': projectId}, // 初始化时带的参数
            cols: [
                [
                    {type: 'numbers', width: '5%', title: '#', align: 'center'},
                    {field: 'memberTenantAccount', title: '账户', align: 'center',},
                    {field: 'memberTenantName', title: '名称', align: 'center'},
                    {field: 'createdAt', title: '加入时间', align: 'center'},
                    {field: 'remark', title: '备注', align: 'center', templet: function (d) {
                            if (!d.id) {
                                return '<span class="layui-badge layui-bg-blue">创建者</span>';
                            } else {
                                return d.remark;
                            }
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        templet: function (d) {
                            if (d.id) {
                                return '<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>';
                            } else {
                                return '<button class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled" lay-event="delete" disabled>删除</button>';
                            }
                        }
                    }
                ]
            ],
            skin: 'line', // 行边框风格
            page: false,
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            }
        });


        table.on('tool(projectMemberTableFilter)', function (obj) {
            var lineData = obj.data;
            if (obj.event === 'delete') {
                console.log(JSON.stringify(lineData));

                layer.confirm('确定删除此成员吗', function (index) {
                    layer.close(index);
                    miniAjax.get({
                        url: '/projectmember/delete?id=' + lineData.id,
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                    // 重载表格，刷新数据
                                    memberTable.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        },
                        error: function (error) {
                            layer.msg(error, {time: 1000, icon: 2});
                        }
                    });
                });

            }
        });

        // 表单提交事件监听
        form.on('submit(confirmAdd)', function (data) {
            const helpMemberList = helpMemberSelect.getValue();
            if (!helpMemberList || helpMemberList.length === 0) {
                layer.msg('请选择协助成员', {time: 1000, icon: 2});
                return false;
            }
            miniAjax.postJSON({
                url: '/projectmember/add',
                data: JSON.stringify(Object.assign({}, {'memberTenantId': helpMemberList[0].id}, {'projectId': projectId})),
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                            // 重载表格，刷新数据
                            memberTable.reload();
                        })
                    } else {
                        layer.msg(res.msg, {time: 1000, icon: 2});
                    }
                },
                error: function (error) {
                    layer.msg(error, {time: 1000, icon: 2});
                }
            });

            return false;
        });
    });

</script>